<template>
  <div class="wb-item-find-different" :style="itemStyle">
    <p class="pass" :style="passStyle">第{{ DIGIT_MAP[index] }}关</p>
    <ul class="grids-con">
      <li class="grid-item" v-for="(item_, qIndex) in grids" :key="qIndex" :style="{top: item_.x, left:item_.y}">
        <img :src="item_.picUrl" :data-index="qIndex" :style="imgStyles"></li>
    </ul>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { DIGIT_MAP } from '@/common/const' 
import { EventBus } from '@/store/index'
import { reactive } from 'vue'
import { getPxOVwByValue } from '@/store/utils'

//4,9,16,25,36,49
const DIFFERENT_TYPES = {
  same: 0,
  different: 1,
  delayTime: 500,
  oriX: 112,
  oriY: 152,
}

export default {
  mixins: [utils],
  setup () {
    const grids = reactive( [] )
    return {
      DIGIT_MAP: DIGIT_MAP,
      grids: grids,
      gridWids: [],
      gridHeis: [],
      isSuccess: false,//游戏成功
      onShowMask: null,
      showPop: null,
      passStyle: {
        fontSize: getPxOVwByValue(40),
        top: getPxOVwByValue(40),
        letterSpacing: getPxOVwByValue(10)
      }
    }
  },
  props: {
    item: Object,
    different: Object,
    qItem: Object,
    index: Number,
  },
  created() {
    let customParams = this.commonAttr.customParams;
    if(customParams){
      let customObj = JSON.parse(customParams);
      _.merge(DIFFERENT_TYPES, customObj);
    }
    let conAttr = this.item.conAttr;
    let row = this.qItem.row;
    let widOrhei = 0;
    _.forEach(this.lists, () => {
      widOrhei = (conAttr.width - DIFFERENT_TYPES.oriX*2)/row;
      this.gridWids.push(widOrhei);
      this.gridHeis.push(widOrhei);
    })

    if(this.isH5Edit){
      return
    }
    EventBus.$off("timerEnd", this.onTimerComplete)
    EventBus.$on("timerEnd", this.onTimerComplete)
  },
  computed: {
    imgStyles(){
      return {
        width: getPxOVwByValue(this.gridWids[this.index]),
        height: getPxOVwByValue(this.gridWids[this.index]),
      }
    }
  },
  methods:{
    refreshGrid(){
      while(this.grids.length > 0){
        this.grids.pop()
      }
     let row = this.qItem.row
     let col = this.qItem.col
     let item
     let randomDifferentIndex = _.random(0, row*col-1)
     let index = 0
     let sames = this.commonAttr.sames.split(',')
     let samePicIndex = _.random(0, sames.length-1)
     let samePicUrl = sames[samePicIndex]
     let differents = this.commonAttr.differents.split(',')
     let differentPicIndex = _.random(0, differents.length-1)
     let differentPicUrl = differents[differentPicIndex]
     let oriX = DIFFERENT_TYPES.oriX
     let oriY = DIFFERENT_TYPES.oriY
     for(let i = 0; i < row; i++){
       for(let j = 0; j < col; j++){
         if(index == randomDifferentIndex){
           item = { picUrl: differentPicUrl, type: DIFFERENT_TYPES.different}
         }else{
           item = { picUrl: samePicUrl, type: DIFFERENT_TYPES.same}
         }
         item.x = getPxOVwByValue(oriY + i * this.gridWids[this.index])
         item.y = getPxOVwByValue(oriX + j * this.gridWids[this.index])
         this.grids.push(item)
         index++
       }
     }
    },
    onTimerComplete(){
      //计时结束，调用方法，显示mask 继续游戏 判断游戏是否结束
      this.different.isTiming = false
      if(!this.different.isShowPop){
        this.showGameSuccessOrFailPop()
      }
    },
    onFindDifferent(e, gridItem, questionItem, itemIndex, nextSlide, onShowMask, showPop){
      this.onShowMask = onShowMask;
      this.showPop = showPop;
      if(gridItem.isAnimate){
        return
      }
      if(gridItem.type == DIFFERENT_TYPES.same){
        //动画
        // this.addClass(questionItem, 'animate-scale')
        this.addClass(questionItem, 'animate__animated')
        this.addClass(questionItem, 'animate__heartBeat')
        gridItem.isAnimate = true
        window.setTimeout(() => {
          this.removeClass(questionItem, 'animate__animated')
          this.removeClass(questionItem, 'animate__heartBeat')
          gridItem.isAnimate = false
          questionItem.parentElement.style.zIndex = 0
        }, DIFFERENT_TYPES.delayTime)
      }else{
        // this.addClass(questionItem, 'animate-scale0')
        this.addClass(questionItem, 'animate__animated')
        this.addClass(questionItem, 'animate__zoomOut')
        gridItem.isAnimate = true
        window.setTimeout(() => {
          this.removeClass(questionItem, 'animate__animated')
          this.removeClass(questionItem, 'animate__zoomOut')
          gridItem.isAnimate = false
          questionItem.parentElement.style.zIndex = 0
          let slideIndex = itemIndex+1
          if(slideIndex < this.wbListOrLists.length){
            nextSlide({slideIndex})
          }else{
            if(this.different.isTiming){
              this.isSuccess = true
              //游戏完成 调用后端接口
            }else{
              this.isSuccess = false
            }
            this.showGameSuccessOrFailPop(e)
          }
        }, DIFFERENT_TYPES.delayTime)
      }
    },
    showGameSuccessOrFailPop(){
      EventBus.$emit("timerPause", this.timerPause)
      this.different.isShowPop = true
      let popId = 0
      let eventAttr = this.item.eventAttr
      eventAttr.isNoActEventResult = true
      if(eventAttr){
        if(this.isSuccess){
          popId = eventAttr.successPanelId
        }else{
          popId = eventAttr.failPanelId
        }
        if(popId){
          this.showPop(popId)
        }
      }
      this.onShowMask()
    }
  },
  beforeUnmount(){
    EventBus.$off("timerEnd", this.onTimerComplete)
  }
};
</script>

<style lang="scss">
.wb-item-find-different{
  width: inherit;
  height: inherit;

  .pass{
    color: #fff;
    z-index: 10;
    position: absolute;
    left: 34%;
  }
  .grids-con{
    position: relative;
    width: inherit;
    height: inherit;
    .grid-item{
      position: absolute;
      img{
        object-fit: contain;
      }
    }
  }
}
</style>


